import React, { Component } from 'react'
import { Layout, Avatar, Dropdown, Menu, Badge } from 'antd';
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import Cookies from 'js-cookie'
import { getNotificationList } from '@/redux/actions/notifications.js'

import logo from '../logo.png'

const { Header } = Layout;

const mapState = state => {
  return {
    notificationsCount: state.notifications.list.filter(item => !item.hasRead).length
  }
}

@connect(mapState, { getNotificationList })
class MyHeader extends Component {
  componentDidMount() {
    this.props.getNotificationList()
  }
  render() {
    return (
      <Header className="header myheader">
        <div className="logo" >
          <img src={logo} alt=""/>
        </div>
        <Dropdown overlay={<DropdownMenu/>} trigger={['click']}>
          <span>
            <Badge dot={Boolean(this.props.notificationsCount)}>
              <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
            </Badge>
            <span>欢迎您，比伯</span>
          </span>
        </Dropdown>
      </Header>
    )
  }
}

const mapDropdownMenuState = state => {
  return {
    notificationsCount: state.notifications.list.filter(item => !item.hasRead).length
  }
}

@connect(mapDropdownMenuState)
@withRouter
class DropdownMenu extends Component {
  handleMenuClick = ({ key }) => {
    if(key === 'info') {
      this.props.history.push('/admin/notifications')
    }
    if(key === 'logout') {
      Cookies.remove('ycadmin')
      this.props.history.push('/login')
    }
  }
  render() {
    return (
      <Menu style={{textAlign: "center"}} onClick={this.handleMenuClick}>
        <Menu.Item key="info">
          <Badge count={this.props.notificationsCount} offset={[-70, 5]} overflowCount={10}>
            通知中心
          </Badge>
        </Menu.Item>
        <Menu.Item key="1">
          <span>个人中心</span>
        </Menu.Item>
        <Menu.Divider />
        <Menu.Item key="logout">退出登录</Menu.Item>
      </Menu>
    )
  }
}

export default MyHeader
